<template>
  <div class='ele-body ele-body-card'>
    <a-card
      :bordered='true'
      :body-style="{padding: '20px'}">
      <a-form
        ref='ipPortformRef'
        :model='ipPortformModel'
        :rules="ipPortRules"
        :label-col='{ md: { span: 7 }, sm: { span: 24 } }'
        :wrapper-col='{ md: { span: 17 }, sm: { span: 24 } }'
        @submit='pushIpPort'
      >
        <a-row :gutter='8'>
          <a-col :md='10' :sm='24' :xs='24'>
            <a-form-item label='数据采集IP:' name='ip'>
              <a-input v-model:value='ipPortformModel.ip' placeholder='请输入ip，例如10.10.10.10' allow-clear />
            </a-form-item>
          </a-col>
          <a-col :md='12' :sm='24' :xs='24'>
          </a-col>
        </a-row>
        <a-row :gutter='8'>
          <a-col :md='10' :sm='24' :xs='24'>
            <a-form-item label='数据采集端口:' name='port'>
              <a-input v-model:value='ipPortformModel.port' placeholder='请输入ip，例如8000' allow-clear />
            </a-form-item>
          </a-col>
          <a-col :md='12' :sm='24' :xs='24'>
            <a-button type='primary' html-type='submit' :loading='ipPortformRefLoading'>
              提交
            </a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </div>
</template>

<script>
import {DeviceWatermeterQueueApi} from '@/api/property/DeviceWatermeterQueueApi';
import { message } from 'ant-design-vue';

export default {
  name: 'DeviceWatermeterConfigOther',
  components: {
  },
  props: {
    data: Object
  },
  async created() {

  },
  data() {
    return {
      loading : false,

      ipPortformModel: {},
      ipPortRules : {},
      ipPortformRefLoading: false,
      ipPortformRefTimer : undefined,


    };
  },
  methods: {
    clearIpPortformRef(){
      this.ipPortformRefLoading = false;
      clearInterval(this.ipPortformRefTimer);
    },
    checkProcess(dictate, clearCallback, callback) {
      let params = {
        recordId: this.data.recordId,
        dictate: dictate
      };
      let result = DeviceWatermeterQueueApi.workingDetail(params);
      result
        .then(result => {
          if (!result || !result.dwqId) { //处理完成了
            clearCallback && clearCallback(); //去掉菊花+清除循环调用
            callback && callback(); //用户自定义
          }
        })
        .catch(() => {
          clearCallback && clearCallback(); //去掉菊花+清除循环调用
        });
    },

    checkIpPort(){
      let that = this;
      this.checkProcess(1, this.clearIpPortformRef, function(){
        that.ipPortformModel.ip = undefined;
        that.ipPortformModel.port = undefined;
      });
    },

    pushIpPort() {
      if (!this.ipPortformModel.ip || !this.ipPortformModel.port) {
        message.error('请先填写ip和端口');
        return;
      }
      this.loading = true;
      let updateDataRecord = {
        recordId: this.data.recordId,
        updateData: JSON.stringify({
          old: '',
          update: {
              ip : this.ipPortformModel.ip,
              port : this.ipPortformModel.port
          }
        }),
        dictate : 1
      };
      let result = DeviceWatermeterQueueApi.add(updateDataRecord);
      result
        .then(result => {
          this.loading = false;
          message.success(result.message);

          this.ipPortformRefLoading = true; //转圈
          this.ipPortformRefTimer = setInterval(this.checkIpPort, 5000);
        })
        .catch(() => {
          this.loading = false;
        });
    }

  }
};
</script>
<style scoped>
/** 用户卡片 */
.workplace-user-card .ele-cell-content {
  overflow: hidden;
}

.workplace-user-card h4 {
  margin-bottom: 6px;
}
</style>
